<template>
	<view class="container">    <!-- 页面 -->
		<image class="haed_icon" :src="icon" style="width: 100px;height: 100px;" ></image>     <!-- 头像 -->
		<text class="username">{{username}}</text>    <!-- 用户名 -->
		<view style="width: 100%;">    <!-- 底部容器 -->
			<view class="entries">     <!-- 入口容器 -->
				<view class="entry">     <!-- 入口项 -->
					<text class="entry_text">个人信息</text>     <!-- 入口项文字 -->
					<image class="entry_arrow" src="/static/more.png" style="width: 50px;height: 50px;"></image>     <!-- 入口图标 -->
				</view>
				<view class="entry">
					<text class="entry_text">订单列表</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px;height: 50px;"></image>
				</view>
				<view class="entry">
					<text class="entry_text" >修改密码</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px;height: 50px;"></image>
				</view>
				<view class="entry">
					<text class="entry_text">意见反馈</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px;height: 50px;"></image>
				</view>
			</view>
			<button type="primary" style="margin: 0 20px;">退出</button>     <!-- 按钮 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icon:'/static/logo.png',
				username:'陈俊明'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.container{
		display: flex;  /* 设置容器为弹性布局容器 */
		flex-direction: column; /* 主轴从上到下 */
		align-items: center; /* 内部组件交叉轴水平居中 */
		width: '100%';
		padding-top: 10%;
	}
	.entries{
		width: '90%';
		padding: 20px;
	}
	.entry{
		width: '90%';
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 50px;
		justify-content: space-between; /* 两端对齐 */
		border-top: 1px solid #ccc;
		
	}
	.entry:last-child{ /* 为最后一个入口加下边框 */
		border-bottom: 1px solid #ccc;
	}
	.entry_text{
		font-size: 20px;
	}
</style>
